<template>
  <div id="app">
    <!-- 路由入口 -->
    <keep-alive>
      <transition name="el-fade-in">
        <router-view v-if="isRouterAlive"></router-view>
      </transition>
    </keep-alive>
  </div>
</template>

<script>

export default {
  name: 'App',

  provide() {
    return {
      reload: this.reload
    }
  },

  data() {
    return {
      isRouterAlive: true
    }
  },

  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      })
    }
  },

  mounted() {
    if (document.querySelector('#loading-more')) {
      document.querySelector('#loading-more').remove();
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2c3e50;
  min-width: 999px;
  /* text-align: center; */
}
#app .ant-layout-header {
  position: absolute;
  background-color: #ec4141;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  top: 0;
  color: #fff;
}
#app .ant-layout-footer {
  width: 100%;
  height: 80px;
  line-height: 80px;
  position: absolute;
  bottom: 0;
  background: #fff;
  color: #fff;
  border-top: 1px solid #e6e6e6;
}
#app .ant-layout-footer {
  line-height: 1.5;
  padding: 0 15px;
  color: #2c3e50;
  min-width: 999px;
}
#app .ant-layout-sider,
#app .ant-layout-content {
  margin-top: 60px;
  background: #fff;
  color: #000;
  height: calc(100vh - 60px - 80px);
  overflow: hidden;
  /* min-height: 120px;
  line-height: 120px; */
}
#app > .ant-layout {
  margin-bottom: 48px;
}
#app > .ant-layout:last-child {
  margin: 0;
}
</style>
